import {useLocation, useNavigate} from "react-router-dom";
import {Button, Form, Input, message, Space} from "antd";
import {useEffect} from "react";
import {getMeetByIdList, postMeet, putMeet} from "../../../../api/admin/meet.js";

const layout = {
    labelCol: {
        span: 5,
    }, wrapperCol: {
        span: 19,
    },
};
const tailLayout = {
    wrapperCol: {
        // offset: 4,
        span: 24,
    },
};

const AddUpdate = () => {
    const navigate = useNavigate();
    const {TextArea} = Input;
    const {state} = useLocation()
    const [form] = Form.useForm();
    const onFinish = (values) => {
        console.log(values);
        if (state.id) {
            putMeetList()
        } else {
            postMeetList()
        }

    };

    useEffect(() => {
        if (state) {
            getUserInfoByIdList()
        }
    }, [])

    const getUserInfoByIdList = () => {
        // console.log(state.id,'id')
        getMeetByIdList(state.id)
            .then(res => {
                const {data, code} = res
                if (code === 200) {
                    console.log(data, 'data')
                    form.setFieldsValue({name: data.name})
                    form.setFieldsValue({capacity: data.capacity})
                    form.setFieldsValue({location: data.location})
                    form.setFieldsValue({equipment: data.equipment})
                    form.setFieldsValue({description: data.description})
                }
            })
            .catch(err => {
                console.log(err, 'err')
            })
    }

    const postMeetList = () => {
        const list = {
            name: form.getFieldValue('name'),
            capacity: form.getFieldValue('capacity'),
            location: form.getFieldValue('location'),
            equipment: form.getFieldValue('equipment'),
            description: form.getFieldValue('description')
        }
        console.log(list, 'list')
        postMeet(list)
            .then(res => {
                const {code} = res
                if (code === 200 || code === 201) {
                    message.success('新增成功')
                    navigate('/meet')
                } else {
                    message.error('新增失败')
                }
            })
    }

    const putMeetList = () => {
        console.log('1111s')
        const list = {
            id: state.id,
            name: form.getFieldValue('name'),
            capacity: form.getFieldValue('capacity'),
            location: form.getFieldValue('location'),
            equipment: form.getFieldValue('equipment'),
            description: form.getFieldValue('description')
        }
        console.log(list, 'list111')
        putMeet(list)
            .then(res => {
                const {code} = res
                if (code === 200 || code === 201) {
                    message.success('编辑成功')
                    navigate('/meet')
                } else {
                    message.error('编辑失败')
                }
            })
    }


    return (
        <>
            <div className="title"> 会议室{state ? '编辑' : '新增'}</div>
            <div className="content">
                <Form
                    {...layout}
                    form={form}
                    name="control-hooks"
                    onFinish={onFinish}
                    style={{
                        width: 500,
                    }}
                >
                    <Form.Item
                        name="name"
                        label="名称"
                        rules={[{
                            required: true,
                        },]}
                    >
                        <Input placeholder="请输入"/>
                    </Form.Item>
                    <Form.Item
                        name="capacity"
                        label="容量"
                        rules={[{
                            required: true,
                        },]}
                    >
                        <Input placeholder="请输入"/>
                    </Form.Item>
                    <Form.Item
                        name="location"
                        label="位置"
                        rules={[{
                            required: true,
                        },]}
                    >
                        <Input placeholder="请输入"/>
                    </Form.Item>
                    <Form.Item
                        name="equipment"
                        label="设备"
                        rules={[{
                            required: true,
                        },]}
                    >
                        <Input placeholder="请输入"/>
                    </Form.Item>
                    <Form.Item
                        name="description"
                        label="描述"
                        rules={[{
                            required: true,
                        },]}
                    >
                        <TextArea
                            showCount
                            maxLength={100}
                            placeholder="请输入"
                            style={{
                                height: 80,
                                resize: 'none',
                            }}
                        />
                    </Form.Item>
                    <Form.Item {...tailLayout}>
                        <Space>
                            <Button type="primary" htmlType="submit" style={{width: '500px'}}>
                                提交
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>
            </div>
        </>
    )
}

export default AddUpdate